import React, { useState } from 'react';
import styles from './style.less';
import { history } from 'umi';
import { Input, Button, Row, Col, Modal } from 'antd';
import { User_Login, User_Login_Next } from '@/services/api';
import background from '@/img/login.png';

function Login() {
  return (
    <div>
      <LoginCom />
    </div>
  );
}

function LoginCom() {
  const [phoneNumber, setPhoneNumber] = useState('');
  const [password, setPassword] = useState('');

  const [isModalVisible1, setVisible1] = useState(false);
  const [isModalVisible2, setVisible2] = useState(false);

  async function login() {
    try {
      User_Login(phoneNumber, password).then(res => {
        console.log(res);
        if (res == 0) {
          try {
            User_Login_Next(phoneNumber).then(res2 => {
              console.log(res2);
              history.push(`/home/${res2.user_id}`);
            });
          } catch (error) {
            console.log(error);
          }
        } else if (res == -1) {
          setVisible1(true);
        } else if (res == -2) {
          setVisible2(true);
        }
      });
    } catch (error) {
      console.log(error);
    }
  }

  function handleNumber(e: any) {
    setPhoneNumber(e.target.value);
    console.log(phoneNumber);
  }

  function handlePw(e: any) {
    setPassword(e.target.value);
    console.log(password);
  }

  function handleOK1() {
    setVisible1(false);
  }
  function handleOK2() {
    setVisible2(false);
  }

  return (
    <div className={styles.background}>
      <img src={background} alt="" />
      <div className={styles.loginblock}>
        <div className={styles.logininner}>
          <Modal
            title="提示"
            visible={isModalVisible1}
            onOk={handleOK1}
            onCancel={handleOK1}
          >
            <div className={styles.modal}>
              <h3>用户不存在</h3>
            </div>
          </Modal>

          <Modal
            title="提示"
            visible={isModalVisible2}
            onOk={handleOK2}
            onCancel={handleOK2}
          >
            <div className={styles.modal}>
              <h3>密码错误</h3>
            </div>
          </Modal>

          <Row gutter={[1, 45]}>
            <Col className="gutter-row" span={6}>
              <h3>请输入手机号：</h3>
            </Col>
            <Col className="gutter-row" span={18}>
              <Input
                value={phoneNumber}
                onChange={handleNumber}
                placeholder="请输入手机号"
              />
            </Col>
            <Col className="gutter-row" span={6}>
              <h3>请输入密码：</h3>
            </Col>
            <Col className="gutter-row" span={18}>
              <Input.Password
                value={password}
                onChange={handlePw}
                placeholder="请输入密码"
              />
            </Col>
          </Row>
          <Button type="primary" onClick={login}>
            登录
          </Button>
        </div>
      </div>
    </div>
  );
}

export default Login;
